<!--
 * 页面位置内容
 * @author luguoxiang
 * @date 2023-03-19
 * 开源项目：https://gitee.com/lgx1992/lg-soar 求star！请给我star！请帮我点个star！
-->
<template>
  <edit-container ref="containerRef" v-bind="containerConfig">
    <lg-form ref="formRef" v-loading="loading" :schema="schema" v-bind="formConfig">
      <template #img="{ data }">
        <div :style="{ '--lg-upload-w': width, '--lg-upload-h': height }">
          <lg-upload v-model="data.coverImage" type="img" value-type="url" />
          <div class="lg-center-text" style="color: var(--td-warning-color-5)">{{ tips }}</div>
        </div>
      </template>
    </lg-form>
  </edit-container>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { EditContainer, useEditContainer } from '@/components';
import { LgForm, LgUpload } from '@/soar';
import schema from './schema';
import api from './api';
import positionApi from '../api';

const emits = defineEmits(['ok']);

const width = ref('100px');
const height = ref('100px');
const tips = ref('');

const containerRef = ref();
const formRef = ref();
const { containerConfig, formConfig, loading, open } = useEditContainer<any>({
  header: '位置内容',
  containerRef,
  formRef,
  onOpen(params: any) {
    positionApi.detail(params.positionId).then((p) => {
      if (p.width < p.height) {
        height.value = `${(p.height * 100) / p.width}px`;
      } else {
        width.value = `${(p.width * 100) / p.height}px`;
      }
      tips.value = `${p.width} * ${p.height}`;
    });
  },
  getData: (params: any) => api.detail(params.id),
  onOk: async ({ values, data, params, isUpdate, changed }) => {
    if (changed) {
      values.id = data.id;
      await api.saveOrUpdate(values, isUpdate);
      emits('ok', values);
    }
  },
  containerProps: {
    width: '600px',
  },
});

defineExpose({ open });
</script>
